<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式</title>
    <script>
        function f1(){
            alert("内联方式");
        }
    </script>
    <script type="text/javascript" src="test.js"></script>
</head>
<body>
<!--
    可以为HTML中任意元素增加一些事件
    当事件触发之后执行对应的js代码
    每一个元素的属性中都存在对应的事件属性,这种属性称之为事件句柄
-->
<button onclick="javascript:alert('Hello World');">简短缩写方式</button>
<button onclick="alert('Hello World');">简写方式</button><br>
<a href="javascript:;" onclick="f1()">内联样式</a>
<div style="width: 100px;height: 50px;background-color: red;" onclick="fn()">外部引入</div>
</body>
</html>